<template>
    <div>
        <a-modal
            title="审核不通过"
            :visible="visible"
            @ok="handleOk"
            @cancel="visible = false"
        >
            <div class="howeverReason-form-item">
                <a-form-model
                    :id="randomId1"
                    class="form-model-big-box form-model-big-box1"
                    ref="ruleForm1"
                    :model="form"
                    :rules="rules"
                    layout="inline"
                >
                    <a-form-model-item ref="opinion" label="原因" prop="opinion" class="form-item-flex-1">
                        <a-textarea 
                            v-model="form.opinion"
                            :autosize="{ minRows: 3, maxRows: 10000 }"
                            placeholder="请输入原因"
                        ></a-textarea>
                    </a-form-model-item>
                </a-form-model>
            </div>
        </a-modal>
    </div>
</template>
<script>
export default {
    components:{

    },
    props:{

    },
    data(){
        return{
            visible:false,
            form:{},
            rules:{
                opinion: [{ required: true, message: '请输入原因', trigger: 'blur' }],
            },
            randomId1:'formModel1'+new Date().getTime(),
        }
    },
    watch:{

    },
    mounted(){
        this.$nextTick(()=>{//表格所有标题样式
            this.getFormLabelStyle(this.randomId1)
        })
    },
    methods:{
        getFormLabelStyle(id,val){
            var parentElement = document.getElementById(id)//要不一样的id，避免不同组件加载到一样的
            var elements = parentElement.getElementsByClassName("ant-form-item");
            for (var i = 0; i < elements.length; i++) {
                let element = elements[i]
                if(element){
                    let itemLabel = elements[i].getElementsByClassName('ant-form-item-label')
                    if(itemLabel.length && itemLabel[0].getElementsByTagName('label').length){
                        //console.log(itemLabel[0].getElementsByTagName('label'))
                            itemLabel[0].getElementsByTagName('label')[0].style = 
                            'width:85px;display: flex;align-items: center;justify-content: flex-end;font-weight: 600;font-family:simHei;'
                    }
                }
            }
        },
        getData(row){
            this.form = row
        },
        handleOk(){
            this.$refs.ruleForm1.validate(valid => {
                if (valid) {
                    let that = this
                    this.$confirm({
                        title:'您确认要审核不通过吗？',
                        // icon: createVNode(ExclamationCircleOutlined),
                        onOk() {
                            that.$emit('auditNOPASS',that.form)
                        }
                    })
                
                } else {
                    //console.log('error submit!!');
                    return false;
                }
            });
        },
    }
}
</script>
<style lang="less">
    .howeverReason-form-item{
        display: flex;
    flex-wrap: wrap;
    .ant-form-item{
        // display: flex;
        // align-items: center;
    }
    .toolbox-form-item{
        width: 50%;
        // padding: 3px;
    }
    .ant-form-item-with-help{
        margin-bottom: 10px;
    }
    .form-model-big-box{
        width: 100%;
        .form-item-flex-1{
            display: flex;
            .ant-form-item-control-wrapper{
                flex: 1;
                
            }
        }
        .ant-form-item-control-wrapper{
            font-family:仿宋_GB2312 !important;
            
            .ant-checkbox-group{
                height: 40px;
                line-height: 40px;
            }
        }
    }
    .form-model-big-box1{
        .ant-form-item-label{
            
            margin: 4px 3px;
            label{
                padding-left: 3px;
                background: #f0f5ff;
            }
            
        }
    }
    .ant-form-inline .ant-form-item > .ant-form-item-label{
        vertical-align: middle !important;
    }
    }
</style>